<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
<style type="text/css">
.upload-show2{
	clear: both;
	overflow: hidden;
	margin-left: 110px;
}
.upload-show2 .upload-item{
    position: relative;
	float: left;
}
.upload-show2 .upload-item img{
	height: 84px;
    margin-top: 12px;
	margin-right: 12px;
	padding: 8px;
	border: 1px solid #cccccc;
}
.upload-show2 .upload-item .upload-item-close{
    display: block;
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 999999;
    color: #FFFFFF;
    background-color: rgba(0, 150, 136, 0.69);
    font-size: 11px;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
}
</style>
</head>
<body>
    <div class="layui-form timo-compile">
    <form th:action="@{/actCustom/save}">
        <input type="hidden" name="id" th:if="${actCustom}" th:value="${actCustom.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">活动名称</label>
            <div class="layui-input-inline">
                <input class="layui-input" type="text" name="name" placeholder="请输入名称" th:value="${actCustom?.name}">
            </div>
            <label class="layui-form-label">活动类型</label>
            <div class="layui-input-inline">
                <select name="type" mo:dict="ACT_TYPE" mo-selected="${actCustom?.type}" mo-empty="" lay-verify="type"></select>
            </div>
        </div>
        <div class="layui-form-item" id="date-range">
            <label class="layui-form-label">起止时间</label>
            <div class="layui-input-inline">
            	<input type="text" name="startDate" id="startDate" th:value="${#dates.format(actCustom?.startDate, 'yyyy-MM-dd HH:mm:ss')}" class="layui-input" >
            </div>
            <div class="layui-form-mid">~</div>
            <div class="layui-input-inline">
            	<input type="text" name="endDate" id="endDate" th:value="${#dates.format(actCustom?.endDate, 'yyyy-MM-dd HH:mm:ss')}" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item  layui-form-text">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block" >
                <textarea placeholder="请输入内容" class="layui-textarea" name="remark">[[${actCustom?.remark}]]</textarea>
            </div>
        </div>
        <!-- <div class="layui-form-item  layui-form-text">
	        <label class="layui-form-label">内容</label>
            <div class="layui-input-block">
                <textarea id="content" style="display: none;" class="layui-textarea" name="content">[[${actCustom?.content}]]</textarea>
            </div>
        </div> -->
        <div class="layui-form-item  layui-form-text">
		    <label class="layui-form-label">活动内容</label>
		    <div class="layui-input-inline">
		        <button type="button" class="layui-btn upload-image" name="images"
		                th:attr="up-url=@{/upload/image}" up-field="id">
		            <i class="layui-icon">&#xe67c;</i>上传图片
		        </button>
		    </div>
		    <div class="upload-show2">
				<div class='upload-item' th:each="item:${actCustom?.images}">
		    		<img class='img-item' th:id="${item.id}" th:src="${item.path}" th:onclick="zooming([[${item.id}]],'image',[[${item.path}]])" />
		    		<input type='hidden' name="images" th:value="${item.id}" />
		    		<i class='upload-item-close layui-icon layui-icon-close'></i>
		    	</div>
			</div>
		    <div class="upload-show">
		    </div>
		</div>
		
		
        <div class="layui-form-item timo-finally" style="text-align: center;">
            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
</div>
<script th:replace="/common/template :: script"></script>
<script>
layui.use(['form','laydate'], function () {
	var $ = layui.$,
	upload = layui.upload,
	form = layui.form;
	var laydate = layui.laydate;
	laydate.render({ 
		  elem: '#date-range' //开始时间和结束时间所在 input 框的父选择器
		  ,type: 'datetime'
		  //设置开始日期、日期日期的 input 选择器
		  ,range: ['#startDate', '#endDate'] //数组格式为 layui 2.6.6 开始新增
		});
	
	window.zooming = function (id,type,src) {
		var idBar = "#" + id;
	    var width = $(idBar).width();
	    var height = $(idBar).height();
	    var scaleWH = width / height;
	    var bigH = 600;
	    var bigW = scaleWH * bigH;
	    if (bigW > 800) {
	        bigW = 800;
	        bigH = bigW / scaleWH;
	    } // 放大预览图片
	    if (type == "video") {
	        layer.open({
	            type: 1,
				//maxmin: true,
	            title: false,
	            closeBtn: 1,
	            shadeClose: true,
	            area: [bigW + 'px', bigH + 'px'], //宽高
	            content: "<video width='" + bigW + "' height='" + bigH + "'controls=\"controls\" src=" + src + " />"
	        });
	    } else {
	        layer.open({
	            type: 1,
				//maxmin: true,
	            title: false,
	            closeBtn: 1,
	            shadeClose: true,
	            area: [bigW + 'px', bigH + 'px'], //宽高
	            //content: "<img id='ScrollImg' onmousewheel='return window.parent.zoomimg(this);' width='" + bigW + "' height='" + bigH + "'controls=\"controls\" src=" + src + " />"
	            content: "<img width='" + bigW + "' height='" + bigH + "'controls=\"controls\" src=" + src + " />"
			});
	    }

	}
});



</script>
</body>
</html>